<template>
  <view class="peopleBox">
    <!-- 模拟搜索框组件 -->
    <view class="search-box">
      <search @faOpen="open"></search>
    </view>

    <!-- 职业标签模块 -->
    <view class="job-area">
      <view class="all-jobs">
        <view class="job">月嫂</view>
        <view class="job">保姆</view>
        <view class="job">育婴师</view>
        <view class="job">产康师</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job active">全部职业</view>
      </view>
    </view>

    <!-- 员工模块 -->
    <view class="people">
      <view class="people-item">
        <!-- 左边图片块 -->
        <view class="people-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F19%2F20200419085754_pzoew.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668826004&t=0a172d0ea4114213f92a1b4c69eee5ed"
            mode="aspectFill" alt="">

        </view>
        <!-- 右边文字块 -->
        <view class="people-right-item">
          <view class="people-info">
            <b class="people-name">张丽丽</b>
            <view>
              <text class="monery">8000元/</text>
              <text class="wenzi">26天</text>
            </view>
          </view>
          <view class="item-jobs">
            <view class="job active">二星育婴师</view>
            <view class="job active">6年经验</view>
          </view>
          <text class="wenzi">湖南长沙 | 41岁 | 服务13户 | 评价13条</text>
        </view>
      </view>
      <view class="people-item">
        <!-- 左边图片块 -->
        <view class="people-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F19%2F20200419085754_pzoew.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668826004&t=0a172d0ea4114213f92a1b4c69eee5ed"
            mode="aspectFill" alt="">

        </view>
        <!-- 右边文字块 -->
        <view class="people-right-item">
          <view class="people-info">
            <b class="people-name">张丽丽</b>
            <view>
              <text class="monery">8000元/</text>
              <text class="wenzi">26天</text>
            </view>
          </view>
          <view class="item-jobs">
            <view class="job active">二星育婴师</view>
            <view class="job active">6年经验</view>
          </view>
          <text class="wenzi">湖南长沙 | 41岁 | 服务13户 | 评价13条</text>
        </view>
      </view>
      <view class="people-item">
        <!-- 左边图片块 -->
        <view class="people-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F19%2F20200419085754_pzoew.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668826004&t=0a172d0ea4114213f92a1b4c69eee5ed"
            mode="aspectFill" alt="">

        </view>
        <!-- 右边文字块 -->
        <view class="people-right-item">
          <view class="people-info">
            <b class="people-name">张丽丽</b>
            <view>
              <text class="monery">8000元/</text>
              <text class="wenzi">26天</text>
            </view>
          </view>
          <view class="item-jobs">
            <view class="job active">二星育婴师</view>
            <view class="job active">6年经验</view>
          </view>
          <text class="wenzi">湖南长沙 | 41岁 | 服务13户 | 评价13条</text>
        </view>
      </view>
      <view class="people-item">
        <!-- 左边图片块 -->
        <view class="people-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F19%2F20200419085754_pzoew.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668826004&t=0a172d0ea4114213f92a1b4c69eee5ed"
            mode="aspectFill" alt="">

        </view>
        <!-- 右边文字块 -->
        <view class="people-right-item">
          <view class="people-info">
            <b class="people-name">张丽丽</b>
            <view>
              <text class="monery">8000元/</text>
              <text class="wenzi">26天</text>
            </view>
          </view>
          <view class="item-jobs">
            <view class="job active">二星育婴师</view>
            <view class="job active">6年经验</view>
          </view>
          <text class="wenzi">湖南长沙 | 41岁 | 服务13户 | 评价13条</text>
        </view>
      </view>
    </view>


    <!-- 弹层组件 -->
    <pop-up ref="popupFa" :infoList="infoList"></pop-up>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        infoList: [], // 接收弹层的数据
      }
    },
    onLoad() {
      this.getInfo()
    },
    methods: {
      // 封装请求组件
      async getInfo() {
        const {
          data: res
        } = await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/matching')
        this.infoList = res.data.message
      },

      // 打开弹窗
      open() {
        // 当有数据之后再执行打开弹层
        if (this.infoList.length > 0) {
          this.$refs.popupFa.open()
        }
      }
      // const arr = selectorQuery.selectAll(.all-jobs > .job)

    }
  }
</script>

<style lang="scss">
  // 头部下拉框修改样式
  .uni-stat-box {
    .uni-select {
      border: 1px solid #3f51b5;
      border-bottom: solid 1px #3f51b5;

      // 占位符的颜色
      .uni-select__input-text {
        color: #fff;
      }

      // 下拉框的按钮
      .uni-icons {
        color: #fff !important;
      }
    }
  }


  // -------虚拟搜索框
  .search-box {
    position: sticky;
    top: 0;
    z-index: 99;
  }

  // ------职业标签模块
  .job-area {
    position: fixed;

    .all-jobs {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;

      .job {
        height: 40rpx;
        border: 1px solid #979191;
        color: #979191;
        line-height: 40rpx;
        text-align: center;
        border-radius: 28rpx;
        font-size: 24rpx;
        padding: 0 40rpx;
        margin: 16rpx 16rpx 6rpx 16rpx;
      }

      .active {
        border: 1px solid #3f51b5;
        color: #3f51b5;
      }
    }
  }



  // 人员信息
  .people {
    margin-top: 220rpx;
    padding: 10rpx;
    background-color: #fff;

    .people-item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 10rpx;
      border-bottom: 1rpx solid #f2f0f0;

      .people-left-item {
        font-size: 24rpx;

        img {
          height: 172rpx;
          width: 160rpx;
          background-color: pink;
        }
      }

      .people-right-item {
        width: 500rpx;
        height: 172rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .people-info {
          display: flex;
          justify-content: space-between;

          .people-name {
            font-size: 28rpx;
          }

          .monery {
            font-size: 28rpx;
            color: #979191;
            font-weight: 400;
          }
        }


        .item-jobs {
          display: flex;
          background-color: #fff;

          .job {
            height: 40rpx;
            border: 1px solid #979191;
            color: #979191;
            line-height: 40rpx;
            text-align: center;
            border-radius: 28rpx;
            font-size: 20rpx;
            padding: 0 20rpx;
            margin: 10rpx;
          }

          .active {
            border: 1px solid #3f51b5;
            color: #3f51b5;
            font-weight: 600;
          }

        }

        .wenzi {
          font-size: 24rpx;
          color: #979191;
        }
      }

    }
  }
</style>
